import React, { Component } from 'react';
import { connect } from 'react-redux';
// import Typography from '@material-ui/core/Typography';
import {
  Button,
  Avatar,
  CssBaseline,
  TextField,
  FormControlLabel,
  Checkbox,
  Link,
  Grid,
  Box,
  Typography,
  Container,
  InputAdornment
} from '@material-ui/core';
import { LockOutlined, HighlightOff } from '@material-ui/icons';
import { accountExistence } from './fallingmanagelogin.reducer';
import { login } from 'app/shared/reducers/authentication';
import { IRootState } from 'app/shared/reducers';

export interface IFallingManageLoginProps extends StateProps, DispatchProps {}
export const Login = (props: IFallingManageLoginProps) => {
  const { isAuthenticated } = props;
};

class FallingManageLogin extends React.Component<IFallingManageLoginProps> {
  state = {
    phoneNew: '',
    passwordNew: '',
    existence: true,
    remember: false
  };
  // handleSubmit = (event, errors, { phone, password, remember }) => {
  //   console.log(newPhone)
  //   const handleLogin = (phone, password, remember = false) => login(phone, password, remember);
  //   // handleLogin(innerHeight, password, rememberMe);
  // };
  // handleSubmit(){
  //   console.log(document);
  //   // alert()
  // }
  handleSubmit = () => {
    this.props
      .login(this.state.phoneNew, this.state.passwordNew, this.state.remember)
      // @ts-ignore
      .then(
        res => {
          if (this.props.isAuthenticated) {
            const authToken = JSON.parse(
              localStorage.getItem('jhi-authenticationToken') || sessionStorage.getItem('jhi-authenticationToken')
            );
            if (authToken != null) {
              // console.log(window.location.search);
              window.location.search = '?fallingManageMenu';
            }
            // var apiKeyAuth = new SwaggerClient.ApiKeyAuthorization("Authorization", "Bearer " + authToken, "header");
            // console.log(apiKeyAuth);
          }
        }
        // isAuthenticated: authentication.isAuthenticated,
        // redirectMessage: authentication.redirectMessage,
        // account: authentication.account,
        // errorMessage: authentication.errorMessage,
        // sessionHasBeenFetched: authentication.sessionHasBeenFetched,
        // idToken: authentication.idToken,
        // logoutUrl: authentication.logoutUrl
      );
  };
  usernameChange = event => {
    this.state.phoneNew = event.target.value;
    this.setState({
      phoneNew: event.target.value
    });
    this.props
      .accountExistence(this.state.phoneNew)
      // @ts-ignore
      .then(res => {
        // console.log(res);
        if (res.value.data.message === 'error') {
          this.state.existence = false;
          this.setState({
            existence: false
          });
          // console.log(this.state.existence);
        } else {
          this.state.existence = true;
          this.setState({
            existence: true
          });
        }
      });

    // console.log(event.target.value);
    // console.log(this.state.phoneNew);
  };
  // passwordChange(event){
  passwordChange = event => {
    this.state.passwordNew = event.target.value;
    this.setState({
      passwordNew: event.target.value
    });
    // console.log(event.target.value);
    // console.log(this.state.passwordNew);
  };

  isRememberMe = event => {
    if (event.target.value) {
      this.state.remember = false;
      this.setState({
        remember: false
      });
      // console.log(this.state.remember);
    } else {
      if (event.target.value === false) {
        this.state.remember = true;
        this.setState({
          remember: true
        });
        // console.log(this.state.remember);
      }
      // console.log(this.state.passwordNew);
    }
  };
  render() {
    // const theme = useTheme();
    return (
      <Container
        component="main"
        maxWidth="xs"
        style={{
          marginTop: '10%'
        }}
      >
        <CssBaseline />
        <div>
          {/* <AvForm onSubmit={this.handleSubmit}> */}
          <Avatar
            style={{
              marginLeft: '46%'
            }}
          >
            <LockOutlined />
          </Avatar>
          <Typography
            component="h1"
            variant="h5"
            style={{
              paddingLeft: '46%'
            }}
          >
            登录
          </Typography>
          <form noValidate>
            <TextField
              // {...this.state.existence? 'error' :'error'}
              variant="outlined"
              margin="normal"
              required
              fullWidth
              id="phone"
              label="手机号或邮箱"
              name="phone"
              autoComplete="phone"
              autoFocus
              style={{
                borderColor: 'green'
              }}
              // color="secondary"
              InputProps={{
                endAdornment: (
                  <InputAdornment position="end">
                    <HighlightOff
                      style={{
                        display: this.state.existence ? 'none' : '',
                        color: 'red'
                      }}
                    />
                  </InputAdornment>
                )
              }}
              onBlur={this.usernameChange}
            />
            <span
              style={{
                display: this.state.existence ? 'none' : '',
                color: 'red'
              }}
            >
              账号有误
            </span>
            <TextField
              variant="outlined"
              margin="normal"
              required
              fullWidth
              name="password"
              label="密码"
              type="password"
              id="password"
              autoComplete="current-password"
              // onFocus={this.valueChange}
              onBlur={this.passwordChange}
            />
            <FormControlLabel
              control={<Checkbox value={this.state.remember} color="primary" />}
              name="rememberMe"
              id="rememberMe"
              label="记住我"
              onClick={this.isRememberMe}
            />
            <Button
              // type='submit'
              fullWidth
              variant="contained"
              color="primary"
              onClick={this.handleSubmit}
            >
              登录
            </Button>
            <Grid container>
              <Grid item xs>
                <Link href="#" variant="body2">
                  忘记密码?
                </Link>
              </Grid>
              <Grid item>
                <Link href="#" variant="body2">
                  {'还没有账号，点此注册!'}
                </Link>
              </Grid>
            </Grid>
          </form>
        </div>
        <Box mt={8}>{/* <Copyright /> */}</Box>
      </Container>
    );
  }
}
const mapStateToProps = ({ authentication }: IRootState) => ({
  isAuthenticated: authentication.isAuthenticated,
  redirectMessage: authentication.redirectMessage,
  account: authentication.account,
  errorMessage: authentication.errorMessage,
  sessionHasBeenFetched: authentication.sessionHasBeenFetched,
  idToken: authentication.idToken,
  logoutUrl: authentication.logoutUrl
});

const mapDispatchToProps = { login, accountExistence };

type StateProps = ReturnType<typeof mapStateToProps>;
type DispatchProps = typeof mapDispatchToProps;

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(FallingManageLogin);
// export default FallingManageLogin;
